<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/transTemplateList'}">物流</el-breadcrumb-item>
        <el-breadcrumb-item>运费模板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--start content-->
    <div class="content" id="content" ref="pageContent">
      <div class="trans-add">
        <span @click="addNewTrans_btn">新增运费模板</span>
      </div>
      <div class="trans-list">
        <table class="trans-table" border="0" cellspacing="0" cellpadding="0" v-for="(item,index) in transSet.list">
          <tr class="trans-th">
            <th colspan="2">
              <div>{{item.freightName}}</div>
            </th>
            <th colspan="4">
              <div class="trans-th-div">
                <span>最后编辑时间：{{item.createDateStr}}</span>
                <span @click="copyTransTemplate(item,index)">复制模板</span><b>|</b>
                <span @click="modifyTransTemplate(item,index)">修改</span><b>|</b>
                <span @click="deleteTransTemplate(item,index)">删除</span>
              </div>
            </th>
          </tr>
          <tr class="trans-tr">
            <td><span>运送方式</span></td>
            <td><span>运送到</span></td>
            <td>
              <span v-if="item.freightPricingType == 0">首件(个)</span>
              <span v-if="item.freightPricingType == 1">首重(kg)</span>
              <span v-if="item.freightPricingType == 2">首体积(m3)</span>
            </td>
            <td><span>运费(元)</span></td>
            <td>
              <span v-if="item.freightPricingType == 0">续件(个)</span>
              <span v-if="item.freightPricingType == 1">续重(kg)</span>
              <span v-if="item.freightPricingType == 2">续体积(m3)</span>
            </td>
            <td><span>运费(元)</span></td>
          </tr>
          <tr class="trans-tr" v-for="(item1,index1) in item.transFreightRuleVoList">
            <td><span>{{item.freightShipTypeStr}}</span></td>
            <td><span>{{item1.freightRuleName}}</span></td>
            <td><span>{{item1.freightRuleNum}}</span></td>
            <td><span>{{Public.formatMoney(item1.freightRuleMoney,2)}}</span></td>
            <td><span>{{item1.freightRuleCnum}}</span></td>
            <td><span>{{Public.formatMoney(item1.freightRuleCmoney,2)}}</span></td>
          </tr>
        </table>
        <!--分页  start-->
        <div class="block">
          <el-pagination
            @size-change="page_handleSizeChange"
            @current-change="page_handleCurrentChange"
            :current-page="parseInt(transSet.pageTools.pageNo)"
            :page-sizes="transSet.pageTools.pageSizeOptions"
            :page-size="parseInt(transSet.pageTools.pageSize)"
            :total="parseInt(transSet.pageTools.recordCount)"
            layout="total, prev, pager, next, sizes,jumper">
          </el-pagination>
        </div>
        <!--分页  end-->
      </div>
    </div>

  </section>
</template>
<script>
  export default {
    data() {
      return {
       //页面数据
        transSet:{
          list:[],    //运费列表
          pageTools:{},   //翻页
        },
      }
    },
    methods: {

      //（删除）模板
      deleteTransTemplate(item,index){
        const h = this.$createElement;
        this.$msgbox({
          title: '删除',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '是否确定删除该运费模板？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.axios({
              method:"DELETE",
              url:"/v3/trans/freights/" + item.freightCode,
              data:{},
            }).then((res) =>{
              this.queryByPage();
              this.Public.openSuccess(this,"操作成功！")
            }).catch((err) =>{
              this.Public.openError(this,err.response.data)
            });
          }
        }).catch(() => {

        });;
      },

      //（修改）模板
      modifyTransTemplate(item,index){
        localStorage.setItem("freightCode",item.freightCode)
        this.$router.push({path:"/modifyTransTemplate"})
      },

      //（复制）模板
      copyTransTemplate(item,index){
        this.axios({
          method:"PATCH",
          url:"/v3/trans/freights/" + item.freightCode + "/copy ",
          data:{},
        }).then((res) =>{
          this.queryByPage();
          this.Public.openSuccess(this,"操作成功！")
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },

      //初始化页面（列表）
      queryByPage(){
         this.axios({
           method:"POST",
           url:"/v3/trans/freights/list",
           data:{
             "offset":(this.transSet.pageTools.pageNo-1)*this.transSet.pageTools.pageSize,
             "limit":this.transSet.pageTools.pageSize,
           },
         }).then((res) =>{
           this.transSet.list = res.data.list;
           this.transSet.pageTools = res.data.pageTools;
           this.transSet.pageTools.pageSizeOptions = JSON.parse(this.transSet.pageTools.pageSizeOptions);
         }).catch((err) =>{
           this.Public.openError(this,err.response.data)
         });
      },

      //新增运费模板（按钮）
      addNewTrans_btn(){
        this.$router.push({path:"/transAddNewTemplate"})
      },

      //分页（每页几条）
      page_handleSizeChange(val) {
        this.transSet.pageTools.pageSize = val;
        this.queryByPage();
      },

      //分页（当前第几页）
      page_handleCurrentChange(val) {
        this.transSet.pageTools.pageNo = val;
        this.queryByPage();
      },
    },
    created(){
      this.transSet.pageTools = this.$store.state.page;
      this.queryByPage();
    },
    mounted() {
      // 设置窗口高度 start
      var winHieg = document.documentElement.clientHeight;
      var cont = document.getElementById("content");
      cont.style.height = winHieg - 115 + "px";
    },
  }
</script>
<style scoped>

  .block {
    float: right;
    margin-top: 10px;
  }

  .trans-table tr td:last-child{
    border-right: 0;
  }

  .trans-tr td{
    width: 15%;
    text-align: left;
    padding:10px 20px;
    border-top: 1px #dddddd solid;
    border-right: 1px #dddddd solid;
  }

  .trans-tr{
    height: 36px;
  }

  .trans-th-div span{
    margin-left: 20px;
    margin-right: 20px;
    color: #03B8CC;
    cursor: pointer;
  }

  .trans-th-div span:hover{
   opacity: 0.7;
  }

  .trans-th-div b{
    color: #999999;
  }

  .trans-th-div span:last-child{
    margin-right: 0;
  }

  .trans-th-div span:first-child{
    margin-left: 0;
    color: #999999;
    cursor: text;
  }

  .trans-th-div span:first-child:hover{
    opacity: 1;
  }

  .trans-th th:first-child{
    text-align: left;
    padding: 0 0 0 20px;
  }

  .trans-th th:last-child{
    text-align: right;
    padding: 0 20px 0 0;
  }

  .trans-th{
    height: 36px;
    background: #eef1f9;
  }

  .trans-table{
    border: 1px #dddddd solid;
    width: 100%;
    margin: 15px 0;
  }

  .trans-add span{
    display: block;
    float: right;
    background: #13C19F;
    color: white;
    border-radius: 17px;
    padding: 8px 10px;
    cursor: pointer;
  }

  .trans-add span:hover{
    opacity: 0.8;
  }

  .trans-add{
    height: 36px;
  }

  .location{
    padding: 3px 0 15px 0;
  }

  .content{
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
    position: relative;
  }
</style>
